<template>
  <div class="RankingListItem">
    <div class="header-box">
      <div class="img" @click="albumInfo(topList[0])">
        <img
          :src="topList[0].coverImgUrl"
          alt=""
        />
      </div>
      <div class="album-details">
        <p class="title" @click="albumInfo(topList[0])">{{topList[0].name}}</p>
        <p><i class="iconfont" @click="albumPlay">&#xe638;</i></p>
      </div>
    </div>
    <div class="audio-list">
      <div v-for="(item,index) in tracks" :key="item.id" class="list">
        <div class="left"> <span :class="{'active':index<3?true:false}" class="index">{{index+1}}</span> <span class="title">{{item.name}}</span> </div>
        <div class="right" @click="audioPlay(item)"> <i class="iconfont">&#xe638;</i> </div>
      </div>
      <div class="list last-list">
        <span @click="screenRanking">查看更多> </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex"
import { playlistDetail } from "@/api";
export default {
  name: "RankingListItem",
  props: {
    topList: {
      type: Array,
      required: true,
      default: [{}],
    },
  },
  data() {
    return {
      tracks:[]
    }
  },
  watch: {
    topList(newVal) {
      this.init();
    },
  },
  created() {
    // this.init()
  },
  methods: {
    ...mapActions("music",["ALBUM_MUSIC_LIST_FORMAT","SET_CHANGE_MUSIC_URL","AUDIO_MUSIC_FORMAT"]),
    init() {
      this.getPlaylistDetail();
    },
    getPlaylistDetail() {
      playlistDetail({id:this.topList[0].id}).then(data=>{
        this.tracks = data.playlist.tracks.slice(0,10)
      })
    },
    async audioPlay(val){
      let { musicFlag, config } = await this.AUDIO_MUSIC_FORMAT(val);
      if (musicFlag) {
        await this.SET_CHANGE_MUSIC_URL(config);
        this.$Notification("添加成功!", "success");
      } else {
        this.$Notification("此歌曲暂无版权。");
      }
    },
    albumInfo(val){
      this.$router.push({
        name:"albumDetails",
        query:{
          id:val.id
        }
      })
    },
    async albumPlay(){
      let { config, musicFlag } = await this.ALBUM_MUSIC_LIST_FORMAT({id:this.topList[0].id});
      if (musicFlag) {
        config.map(async (item) => {
          await this.SET_CHANGE_MUSIC_URL(item);
        });
        this.$Notification("添加成功!", "success");
      } else {
        this.$Notification("此歌曲暂无版权。");
      }
    },
    screenRanking() {
      const {id} = this.topList[0];
      this.$router.push({
        name: "findMusicRanking",
        query:{
          id
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.RankingListItem {
  min-height: 100px;
  box-sizing: border-box;
  border: 1px solid #fff;
  .audio-list {
    .list {
      display: flex;
      justify-content: space-between;
      .iconfont{
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        color:rgb(122,121,121);
        font-weight: 600;
        &:hover{
          color:rgb(81,81,81);
        }
      }
      .left{
        display: flex;
        .index{
          color:rgb(102,102,102);
        }
        .title{
          font-size:12px;
          margin-left:8px;
          font-weight: 400;
          width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      &:nth-of-type(2n + 1) {
        background-color: rgb(232, 232, 232);
      }
      padding: 0 24px;
      line-height: 32px;
      color: #000;
      font-size: 14px;
    }
    .last-list {
      .iconfont{
        font-size: 12px;
      }
      span{
        &:hover{
          text-decoration: underline;
        }
        cursor: pointer;
        font-size:12px;
        color:#333;
      }
      justify-content: flex-end;
    }
  }
  .active{
    color:#c10d0c!important;
  }
  .header-box {
    margin: 20px;
    display: flex;
    .img {
      cursor: pointer;
      box-shadow: 0 1px 2px #000;
      margin-right: 10px;
      width: 80px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .album-details {
      flex: 1;
      .title {
        &:hover {
          text-decoration: underline;
        }
        cursor: pointer;
        line-height: 30px;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        color: #333;
        font-weight: 600;
      }
      .iconfont {
        font-weight: 550;
        font-size: 24px;
        color: rgb(193, 193, 193);
        cursor: pointer;
        &:hover {
          color: rgb(155, 155, 155);
        }
      }
    }
  }
}
</style>